<!DOCTYPE html>
<title>Tests that tracks can be turned on and off through the track selection menu.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../media-controls.js'></script>
<video controls></video>
<script>
async_test(t => {
  var captions = ['First', 'Second', 'Third'];
  var video = document.querySelector('video');

  enableTestMode(video);

  video.oncanplaythrough = t.step_func(_ => {
    video.oncanplaythrough = undefined;

    var track1 = video.addTextTrack('captions');
    var track2 = video.addTextTrack('captions');

    for (var i = 0; i < captions.length; ++i) {
      track1.addCue(new VTTCue(0, 120, captions[i]));
      track2.addCue(new VTTCue(0, 120, captions[i]));
    }

    // The controls are updated asynchronously.
    assert_false(isClosedCaptionsButtonEnabled(video));

    setTimeout(t.step_func(_ => {
      assert_true(isClosedCaptionsButtonEnabled(video));

      // The captions track should be listed in textTracks, but not yet loaded.
      assert_equals(video.textTracks.length, 2);
      assert_equals(video.textTracks[0].mode, 'hidden');
      assert_equals(video.textTracks[1].mode, 'hidden');
      checkCaptionsHidden(video);

      // Captions track should become visible after the track is selected and playback begins.
      clickTextTrackAtIndex(video, 0, t.step_func(() => {
        checkCaptionsHidden(video, captions);
        video.play();

        video.onplay = t.step_func(() => {
          checkCaptionsVisible(video, captions);

          // Captions should not be visible after they're turned off through the menu.
          turnClosedCaptionsOff(video, t.step_func(() => {
            checkCaptionsHidden(video);

            // Captions track should become visible after the track is selected again.
            clickTextTrackAtIndex(video, 0, t.step_func_done(() => {
              checkCaptionsVisible(video, captions);
            }));
          }));
        });
      }));
    }));
  });

  video.src = '../content/counting.ogv';
});
</script>
